<template>
	<view style="height: 450px;">
		<view style="width: 100%; height: 200px;">
			<image
				style="width: 100%;height: 100% ;background-color: #eeeeee;"
				mode="scaleToFill"
				src="../../static/img/logo_bg.png"
			></image>
		</view>
		<view class="ui-flex" style="padding: 20px; 10px;box-sizing: border-box;">
			<text style="font-size: 17px;color: #000;" @tap="open()">点击授权</text>
			<view class="my-flex content-center" style="font-size: 17px;color: #333;" @tap="open()">
				{{ subName == null ? '':subName }}
			</view>
			<button
				type="primary"
				style="padding: 5px 10px;line-height: 1;font-size: 13px;"
				@tap="submit()"
			>
				提交
			</button>
		</view>
		<view style="padding: 0 0 10px 15px;color: #616361;">
			已授权列表(以下用户可以查看你的日记)
		</view>
		<view
			v-for="(item, index) in privilegeList"
			:key="index"
			class="ui-flex"
			style="padding:10px 20px; 10px;box-sizing: border-box;"
		>
			<text style="font-size: 17px;color: #000;">{{ item.user_name }}</text>
			<view class="my-flex content-center"></view>
			<button
				type="warn"
				style="padding: 5px 10px;line-height: 1;font-size: 13px;"
				@tap="del(item)"
			>
				删除
			</button>
		</view>
		<mpvue-picker
			themeColor="#007AFF"
			ref="mpvuePicker"
			mode="selector"
			:deepLength="1"
			:pickerValueDefault="activeObj"
			@onConfirm="onConfirm"
			@onCancel="onCancel"
			:pickerValueArray="userList"
		></mpvue-picker>
	</view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker';
import { addParams, delParams } from '@/utils/sql.js';
import { mapActions, mapGetters } from 'vuex';
import '@/utils/dateFormat.js';
export default {
	components: {
		mpvuePicker
	},
	onLoad() {
		this.initData();
	},
	data() {
		return {
			activeObj: [0],
			userList: [],
			privilegeList: [],
			subId: null,
			subName: null
		};
	},
	methods: {
		open() {
			this.$refs.mpvuePicker.show();
		},
		onConfirm(e) {
			console.log(JSON.stringify(e));
			this.subId = e.value[0];
			this.subName = e.label;
		},
		onCancel(e) {
			console.log(e);
		},
		initData() {
			return new Promise((resolve, reject) => {
				this.getUserList().then(() => {
					this.getPrivilegeList().then(() => {
						resolve();
					});
				});
			});
		},
		getPrivilegeList() {
			return new Promise((resolve, reject) => {
				this.$api['fun/diaryPrivilegeListMy']().then(({ data, code, msg }) => {
					if (code == 0 && data.length > 0) {
						this.privilegeList = data;
					} 
					resolve();
				});
			});
		},
		checkUser() {
			return new Promise((resolve, reject) => {
				this.$api['fun/diaryPrivilegeListFriends']({
					referId: this.subId
				}).then(({ data, code, msg }) => {
					if (code == 0 && data.length != 0) {
						resolve(true);
					} else {
						resolve(false);
					}
				});
			});
		},
		getUserList() {
			return new Promise((resolve, reject) => {
				this.$api['fun/diaryPrivilegeUserList']().then(({ data, code, msg }) => {
					if (code == 0 && data.length > 0) {
						data.forEach(item => {
							item.value = item.user_id;
							item.label = item.name;
						});
						this.userList = data;
					} else {
						this.msg(msg);
					}
					resolve();
				});
			});
		},
		submit() {
			// 提交保存
			if (this.subId == null) {
				this.msg('请选择授权用户..');
				return;
			}
			this.checkUser().then(flag => {
				if (flag) this.msg('已经授权该用户..');
				else this.addPrivilege();
			});
		},
		addPrivilege() {
			let obj = {
				user_id: this.subId,
				user_name: this.subName,
				refer_id: this.userInfo.user_id,
				refer_name: this.userInfo.name
			};
			this.showLoading('授权中..');
			this.$api['data/add'](addParams('diary_privilege', obj)).then(({ data, code, msg }) => {
				this.hideLoading();
				if (code == 0 && data > 0) {
					obj.diary_privilege_id = data;
					this.privilegeList.push(obj);
					this.success('授权成功');
				} else {
					this.msg(msg);
				}
			});
		},
		del(item) {
			this.showLoading('删除中...');
			this.$api['data/del'](delParams('diary_privilege', item.diary_privilege_id)).then(
				({ data, code, msg }) => {
					this.hideLoading();
					if (code == 0 && data > 0) {
						this.success('删除成功');
						let index = this.privilegeList.indexOf(item);
						if (index > -1) {
							this.privilegeList.splice(index, 1);
						}
					} else {
						this.msg('删除失败');
					}
					this.isDeleteShow = false;
				}
			);
		}
	},
	computed: {
		...mapGetters(['userInfo', 'wxInfo'])
	}
};
</script>
s

<style lang="scss"></style>
